<div id="content">
  <section widget-grid id="widget-grid">
    <div class="row">
      <article class="col-sm-12">
        <div id="todo-widget" jarvis-widget data-widget-editbutton="false" data-widget-color="blue">
          <header>
            <span class="widget-icon"> <i class="fa fa-table"></i> </span>
            <h2>(总数: {{totalNumber}})</h2>
            <div class="widget-toolbar">
              <button class="btn btn-xs btn-col-fff" ng-class="{active: newTodo}" ng-click="toggleAdd()"><i ng-class="{ 'fa fa-plus': !newTodo, 'fa fa-times': newTodo}"></i> 筛选</button>
              <h2 style="line-height: 30px;">
                  <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal1">新增角色</button>
                </h2>
            </div>
          </header>
          <!--添加-->
          <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="addAccount" aria-hidden="true">
            <form name="myForm2" novalidate>
              <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                      </button>
                      <h4 class="modal-title color" id="addAccount">角色添加</h4>
                    </div>
                    <label class="col-md-2 col-sm-2 col-xs-4 color input-label">角色名称</label>
                    <div class="col-md-10 col-sm-10 col-xs-8 form-group">
                      <input type="text" class="form-control widthB" name="title" placeholder="请输入" required ng-model="addRolele.title">
                    </div>
                    <label class="col-md-2 col-sm-2 col-xs-4 color input-label">描述</label>
                    <div class="col-md-10 col-sm-10 col-xs-8 form-group">
                      <textarea type="text" class="form-control widthB"
                                            name="container" ng-maxlength="35"
                                            placeholder="请输入"
                                            required
                                            ng-model="addRolele.remark"></textarea>
                      <p><small class="error" ng-show="myForm2.container.$error.maxlength">
                                    Your container cannot be longer than 35 characters
                             </small></p>
                    </div>
                    <label class="col-md-2 col-sm-2 col-xs-4 color input-label">功能状态</label>
                    <div class="col-md-10 col-sm-10 col-xs-8 form-group">
                      <label class="radio-inline  input-label" ng-repeat="item in roleStatusOption">
                              <input type="radio" name="addRoleStatus" class="radiobox" value="{{item.value}}"
                                     ng-checked="item.value == addRolele.status" ng-model="addRolele.status">
                              <span>{{item.name}}</span>
                          </label>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">
                                  取消
                              </button>
                      <button type="button" class="btn btn-primary" data-dismiss="modal"
                        ng-disabled="myForm2.container.$error.maxlength || myForm2.container.$error.required || myForm2.title.$error.required" ng-click="addRole()">
                                  确定
                              </button>
                    </div>
                </div>
              </form>
            </div>
          </div>
          <div>
            <div class="widget-body tab-content">
              <!--头部筛选查找以及添加-->
              <div class="widget-body-toolbar" ng-show="newTodo">
                <div class="form-horizontal">
                  <div class="row">
                    <div class="col-md-1 col-xs-4  input-label">状态</div>
                    <div class="col-md-2 col-xs-8">
                      <div class="form-group" ng-init="status='0'">
                        <select class="form-control" ng-model="status">
                                                    <option value="0">请选择</option>
                                                    <option ng-value="itemStatus.value" ng-repeat="itemStatus in json.option_status">{{itemStatus.name}}</option>
                                                </select>
                      </div>
                    </div>
                    <div class="col-md-1 col-xs-4  input-label">是否在线</div>
                    <div class="col-md-2 col-xs-8">
                      <div class="form-group" ng-init="is_login='0'">
                        <select class="form-control" ng-model="is_login">
                            <option value="0">请选择</option>
                            <option ng-value="itemLogin.value" ng-repeat="itemLogin in json.option_online">{{itemLogin.name}}</option>
                        </select>
                      </div>
                    </div>
                    <label class="col-md-1 col-xs-4  input-label">账号搜索</label>
                    <div class="col-md-2 col-xs-8 ">
                      <div class="form-group">
                        <input type="text" class="form-control inp_2" placeholder="请输入开户账号" ng-model="account">
                      </div>
                    </div>
                    <div class="col-sm-1 col-xs-4 text-center col-xs-offset-2 col-md-offset-0">
                      <div class="form-group">
                        <a class="btn btn-default search" ng-click="search()" href-void>搜索</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <form class="form-inline" method="post">
                <div class="table-scroll">
                  <table class="table table-bordered table-hover">
                    <thead>
                      <tr>
                        <th class="text-center">角色名称</th>
                        <th class="text-center">描述</th>
                        <th class="text-center">状态</th>
                        <th class="text-center">操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr ng-repeat="rolele in list track by rolele.id" class="text-center">
                        <td>{{rolele.title}}</td>
                        <td>{{rolele.remark}}</td>
                        <td>
                          <p class="text-green" ng-show="rolele.status==1">启用</p>
                          <p class="text-red" ng-show="rolele.status==2">禁用</p>
                        </td>
                        <td>
                          <!--菜单-->
                          <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#btn_role_menu" ng-click="getRoleMenu()">菜单</button>
                          <div class="modal fade" id="btn_role_menu" tabindex="-1" role="dialog" aria-labelledby="roleMenu" aria-hidden="true">
                            <div class="modal-dialog">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                                        &times;
                                                                    </button>
                                  <h4 class="modal-title" id="roleMenu" style="color:#000;">菜单</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="modal-body widthC">
                                      <div class="form-group">
                                          <div class="checkbox disb row" ng-repeat="menuChild in menuManageGet">
                                            <div class="{{menuChild.title}}" role="tablist" aria-multiselectable="true">
                                                <div class="card">
                                                  <div class="card-header" role="tab" id="{{menuChild.title}}Two">
                                                    <label>
                                                        <a href="#{{menuChild.id}}fwo" ng-click="!nowTodo"
                                                            data-toggle="collapse" data-parent="#{{menuChild.title}}"
                                                            aria-expanded="true" aria-controls="collapseTwo"
                                                            >
                                                          <i ng-class="{ 'fa fa-plus': !nowTodo, 'fa fa-times': nowTodo}"></i>
                                                        </a>
                                                      <a ng-bind-html="menuChild.title" style="color:#000;"></a>
                                                      <input type="checkbox">
                                                    </label>
                                                  </div>
                                                  <div id="{{menuChild.id}}fwo"
                                                        class="collapse show"
                                                        role="tabpanel"
                                                        aria-labelledby="{{menuChild.title}}Two">
                                                    <div class="card-block widthD">
                                                      <div class="menuSon row" ng-repeat="menuSon in menuChild.children">
                                                        <label>
                                                            <a href="#{{menuSon.id}}thr" ng-click="!nowTodo"
                                                                data-toggle="collapse" data-parent="#{{menuSon.title}}"
                                                                aria-expanded="true" aria-controls="collapseThree"
                                                                >
                                                              <i ng-class="{ 'fa fa-plus': !nowTodo, 'fa fa-times': nowTodo}"></i>
                                                            </a>
                                                            <p ng-bind-html="menuSon.title" class="disin"></p>
                                                            <input type="checkbox" />
                                                        </label>
                                                        <div id="{{menuSon.id}}thr"  class="collapse show"
                                                              role="tabpanel"
                                                              aria-labelledby="{{menuSon.title}}thr">
                                                            <div class="card-block widthD">
                                                                <div class="row" ng-repeat="menuSonChild in menuSon.children">
                                                                  <p ng-bind-html="menuSonChild.title" class="disin"></p>
                                                                  <input type="checkbox" />
                                                                </div>
                                                            </div>

                                                        </div>

                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>

                                              </div>


                                          </div>
                                      </div>

                                    </div>





                                </div>
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-default" data-dismiss="modal">
                                                                        取消
                                                                    </button>
                                  <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="click()">
                                                                        确定
                                                                    </button>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!--权限-->
                          <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#btn_role_Permission" ng-click="getRolePermission(rolele)">权限</button>
                          <div class="modal fade" id="btn_role_Permission" tabindex="-1" role="dialog" aria-labelledby="rolePower" aria-hidden="true">
                            <div class="modal-dialog">
                              <form enctype="multipart/form-data" class="smart-form client-form ng-pristine ng-valid" novalidate="novalidate">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                                          &times;
                                                                      </button>
                                    <h4 class="modal-title" id="rolePower" style="color:#000;">权限设置</h4>
                                  </div>
                                  <div class="modal-body widthC">
                                      <div class="form-group">
                                        <!-- ng-repeat="permission in permissionGet track by permission.powersBackpId" -->
                                          <div class="checkbox disb row">
                                            <!-- //{{permissionGet.powersMname}} -->
                                              <!-- <div ng-repeat="permission in permissionGet track by permission.powersBackpId" class="checkbox disb">
                                                  <label>
                                                      {{permission.powersMname}}
                                                      <input type="checkbox">
                                                  </label>
                                                      {{permission.powersBackpChecked}}
                                                      <hr class="widthB">
                                                  <div class="childPermission row" ng-repeat="childPermission in permission.powersBackpMMone">
                                                    <label>
                                                        {{childPermission.childMname}}
                                                        <input type="checkbox">
                                                    </label>
                                                        {{childPermission.powersBackpChecked}}
                                                  </div>-->
                                                  <div id="accordion" role="tablist" aria-multiselectable="true">
                                                      <div class="card">
                                                        <div class="card-header" role="tab" id="headingOne">
                                                          <label>
                                                              <a href="#{{updateRolePermission.powersMname}}" ng-click="!nowTodo"
                                                                  data-toggle="collapse" data-parent="#accordion"
                                                                  aria-expanded="true" aria-controls="collapseOne"
                                                                  >
                                                                <i ng-class="{ 'fa fa-plus': !nowTodo, 'fa fa-times': nowTodo}"></i>
                                                              </a>
                                                            <a ng-bind-html="updateRolePermission.powersMname" style="color:#000;"></a>
                                                            <input type="checkbox"  ng-change="turnAll(updateRolePermission)"
                                                                    ng-model="checkFlagg(updateRolePermission)"

                                                                    value="updateRolePermission.powersBackpChecked">
                                                          </label><!--ng-model="checkFlag" ng-checked="isSelected(updateRolePermission.powersBackpChecked)" ng-click="checka();clickedBox(updateRolePermission);allCheck(updateRolePermission)"-->
                                                        </div>
                                                        <div id="{{updateRolePermission.powersMname}}"
                                                              class="collapse show"
                                                              role="tabpanel"
                                                              aria-labelledby="headingOne">
                                                          <div class="card-block widthD">
                                                            <div class="childPermission row" ng-repeat="childPermission in updateRolePermission.powersBackpMMone">
                                                              <label>
                                                                  <p ng-bind-html="childPermission.childMname" class="disin"></p>
                                                                  <input type="checkbox"  ng-model="checkFlagg(childPermission)"
                                                                                         ng-change="turnItem(updateRolePermission)" ng-model="checkFlagg(childPermission)">
                                                                                         <!--ng-checked="checkFlag" ng-checked="isSelected(childPermission.powersBackpChecked);"  ng-click="clickedBox(childPermission);childCheck()"-->
                                                              </label>
                                                            </div>
                                                          </div>
                                                        </div>
                                                      </div>

                                                    </div>

                                            </div>
                                        </div>
                                  </div>
                                  <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                                                          取消
                                                                      </button>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="updateRolePermissionOK()">
                                                                          确定
                                                                      </button>
                                  </div>
                                </div>
                              </form>
                            </div>
                          </div>
                          <!--状态-->
                          <!-- <button class="btn btn-default btn-xs" ng-click="disable(rolele)" ng-if="rolele.status==2">启用</button>
                                                    <button class="btn btn-default btn-xs" ng-click="disable(rolele)" ng-if="rolele.status==1">禁用</button> -->
                          <!--修改-->
                          <button class="btn btn-xs btn-primary" data-toggle="modal" data-target="#updateRole" ng-click="getRoleInfo(rolele)">修改</button>
                          <div class="modal fade" id="updateRole" tabindex="-1" role="dialog" aria-labelledby="updateRolele" aria-hidden="true">
                            <div class="modal-dialog">
                              <form action="" name="myForm" novalidate>
                                <div class="modal-content">
                                <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                                        &times;
                                                                    </button>
                                  <h4 class="modal-title" id="updateRolele">角色修改</h4>
                                </div>
                                <div class="modal-body">
                                      <div class="client-form ng-pristine">
                                        <div class="row">
                                          <label class="col-md-2 col-sm-2 col-xs-4  input-label">角色名称</label>
                                          <div class="col-md-10 col-sm-10 col-xs-8 form-group">
                                            <input type="text" class="form-control widthB" ng-model="updateRolele.title" name="titlele" placeholder="请输入" required />
                                          </div>
                                        </div>
                                        <div class="row">
                                          <label class="col-md-2 col-xs-2  input-label">角色描述</label>
                                          <div class="col-md-10 col-xs-10 form-group">
                                            <textarea type="text" class="form-control widthB" placeholder="请输入" ng-model="updateRolele.remark" ng-maxlength="35" name="container" ng-pattern="/[1-9]/" required></textarea>
                                            <p><small class="error" ng-show="myForm.container.$error.maxlength">
                                                     Your container cannot be longer than 35 characters
                                              </small></p>
                                            <!-- <p><small class="error"
                                                       ng-show="myForm.container.$error.pattern">
                                                       请输入
                                                </small></p> -->
                                          </div>
                                        </div>
                                        <div class="row">
                                          <div class="col-md-2 col-xs-2  input-label">功能状态</div>
                                          <div class="col-md-10">
                                            <label class="radio-inline input-label" ng-repeat="item in roleStatusOption">
                                                <input type="radio" name="status" class="radiobox" value="{{item.value}}"
                                                       ng-checked="item.value===updateRolele.status" ng-model="updateRolele.status">
                                                <span>{{item.name}}</span>
                                            </label>
                                          </div>
                                        </div>
                                      </div>
                                  </div>
                                  <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                                                          取消
                                                                      </button>
                                    <button type="button" class="btn btn-primary"
                                            ng-click="updateRoleOK()"
                                            data-dismiss="modal"
                                            ng-disabled="myForm.container.$error.maxlength || myForm.container.$error.required || myForm.titlele.$error.required">
                                        确定
                                    </button>
                                  </div>
                                </div>
                              </div>
                              </form>
                            </div>
                          </div>
                          <!--刪除-->
                          <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#btn_role_delete">刪除</button>
                          <div class="modal fade" id="btn_role_delete" tabindex="-1" role="dialog" aria-labelledby="roleDel" aria-hidden="true">
                            <div class="modal-dialog">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                                        &times;
                                                                    </button>
                                  <h4 class="modal-title" id="roleDel" style="color:#000;">确认删除吗？</h4>
                                </div>
                                <div class="modal-body">
                                  <form enctype="multipart/form-data" class="smart-form client-form ng-pristine ng-valid" novalidate="novalidate" >
                                    删除后会丢失数据的!
                                  </form>
                                </div>
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-default" data-dismiss="modal">
                                                                        取消
                                                                    </button>
                                  <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="delRole(rolele)">
                                                                        确定
                                                                    </button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <tm-pagination conf="paginationConf"></tm-pagination>
              </form>
            </div>
          </div>
        </div>
      </article>
    </div>
  </section>

</div>



<style>
  .widthD {
    padding-left: 35% !important;
  }
  .widthC {
    width: 70% !important;
  }
  .widthB {
    width: 100% !important;
  }
  .error {
    color: red;
  }
  .disb {
    display: block!important;
  }
  .disin {
    display: inline-block!important;
  }
  .collapse.in {
    display: block!important;
    transition: all 0.1s!important;
  }
  .show {
    display: none!important;
    transition: all 0.1s!important;
  }
</style>
